<template>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
  >
    <slot></slot>
  </transition>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'pui-collapse',
});
</script>

<script setup lang="ts">
const beforeEnter = (el: any) => {
  el.classList.add('collapse-transition');
  el.dataset.oldPaddingTop = el.style.paddingTop;
  el.dataset.oldPaddingBottom = el.style.paddingBottom;
  el.dataset.oldOverflow = el.style.overflow;
  el.style.overflow = 'hidden';
  el.style.height = '0';
  el.style.paddingTop = 0;
  el.style.paddingBottom = 0;
};
const enter = (el: any) => {
  el.style.height = el.scrollHeight + 'px';
  el.style.paddingTop = el.dataset.oldPaddingTop;
  el.style.paddingBottom = el.dataset.oldPaddingBottom;
};
const afterEnter = (el: any) => {
  el.classList.remove('collapse-transition');
  el.style.height = '';
  el.style.overflow = el.dataset.oldOverflow;
};
const beforeLeave = (el: any) => {
  el.dataset.oldPaddingTop = el.style.paddingTop;
  el.dataset.oldPaddingBottom = el.style.paddingBottom;
  el.dataset.oldOverflow = el.style.overflow;
  el.style.height = el.scrollHeight + 'px';
  el.style.overflow = 'hidden';
};
const leave = (el: any) => {
  el.classList.add('collapse-transition');
  el.style.height = 0;
  el.style.paddingTop = 0;
  el.style.paddingBottom = 0;
};
const afterLeave = (el: any) => {
  el.classList.remove('collapse-transition');
  el.style.height = '';
  el.style.overflow = el.dataset.oldOverflow;
  el.style.paddingTop = el.dataset.oldPaddingTop;
  el.style.paddingBottom = el.dataset.oldPaddingBottom;
};
</script>

<style lang="scss">
.collapse-transition {
  transition: all 0.3s ease-in-out;
}
</style>
